<template>
	<nav-header title="场地详情">
		<view class="bg-white mb-4">
			<u-swiper :list="placeObj.imageList" height="190" @change="e => currentNum = e.current" indicatorStyle="left: 20px"
				:autoplay="false" radius="0" @click="swiperClick">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ placeObj.imageList.length }}</text>
				</view>
			</u-swiper>
			<view class="px-4 pb-6">
				<view class="flex justify-between items-center py-3 border-b-ee">
					<view class="flex items-center flex-1 mr-4">
						<text class="text-black-33 font-bold text-lg pr-2" v-text="placeObj.name"></text>
						<i class="iconfont text-xl" :class="placeObj.isCollected? ['icon-collection-fill', 'text-color-theme']:['icon-collection', 'text-gray-99']"
							 @click="collect"></i>
					</view>
				</view>
				<!-- <view class="flex mt-4 mb-2_5">
					<text class="text-gray-99">场地租金：</text>
					<u-count-to :endVal="parseInt(placeObj.price)" separator="," color="#333333" fontSize="16"></u-count-to>
					<text class="pl-1">/月</text>
				</view> -->
				<view class="mt-4 mb-2_5">
					<text class="text-gray-99">所属区域：</text>
					<text class="text-black-33" v-text="placeObj.areaName || ''"></text>
				</view>
				<view class="flex justify-between items-center mb-2_5">
					<view style="width: calc(100% - 60px);" class="flex pr-2">
						<text class="text-gray-99">联系电话：</text>
						<text class="text-black-33 flex-1" v-text="placeObj.phone || ''"></text>
					</view>

				</view>
				<view class="flex justify-between items-center mb-2_5">
          <text class="text-gray-99">具体位置：</text>
          <text class="text-black-33 leading-7" v-text="placeObj.address || ''"></text>
				</view>
				<view class="mb-2">
					<text class="text-gray-99">主要用途：</text>
					<text class="text-black-33 leading-7" v-text="placeObj.used || ''"></text>
				</view>
			</view>
		</view>
		<view class="bg-white px-4 mb-4">
			<view class="py-3 border-b-ee text-black-33 font-bold text-lg">基础信息</view>
			<view class="py-4">
				<view class="mb-2">
					<text class="text-gray-99">总面积：</text>
					<text v-text="turnArea(placeObj.totalArea) + '㎡'"></text>
				</view>
				<view class="mb-2">
					<text class="text-gray-99">占地面积：</text>
					<text v-text="turnArea(placeObj.floorArea) + '㎡'"></text>
				</view>
				<view class="mb-2">
					<text class="text-gray-99">物业费用：</text>
					<text v-text="placeObj.wgMoney? (placeObj.wgMoney + '/元'):''"></text>
				</view>
				<view class="mb-2">
					<text class="text-gray-99">附近车位：</text>
					<text v-text="placeObj.parking || ''"></text>
				</view>
				<view class="mb-2">
					<text class="text-gray-99">临街状况：</text>
					<text v-text="placeObj.conditions || ''"></text>
				</view>
				<!-- <view class="mb-2">
					<text class="text-gray-99">独立围墙：</text>
					<text></text>
				</view> -->
				<!-- <view class="mb-2">
					<text class="text-gray-99">总楼栋：</text>
					<text></text>
				</view> -->
			</view>
		</view>
		<view class="bg-white px-4 mb-4">
			<view class="py-3 border-b-ee text-black-33 font-bold text-lg">配套信息</view>
			<view class="py-4">
				<view class="font-bold text-black-33 mb-2">交通</view>
				<view class="mb-2">
					<text class="text-gray-99 pl-2">主干道：</text>
					<text v-text="placeObj.road || ''"></text>
				</view>
				<view class="mb-6">
					<text class="text-gray-99 pl-2">公交线路、站名：</text>
					<text v-text="placeObj.busStop || ''"></text>
				</view>
<!--				<view class="font-bold text-black-33 mb-2">基础配套</view>
				<view class="mb-2">
					<text class="text-gray-99 pl-2">中央空调：</text>
					<text v-text="placeObj.isAirCon? '有':'无'"></text>
				</view>
				<view class="mb-2">
					<text class="text-gray-99 pl-2">管道消防：</text>
					<text v-text="placeObj.isGdxf? '有':'无'"></text>
				</view>
				<view class="mb-2">
					<text class="text-gray-99 pl-2">自动喷淋：</text>
					<text v-text="placeObj.isZdpl? '有':'无'"></text>
				</view>
				<view class="mb-6">
					<text class="text-gray-99 pl-2">烟感警报：</text>
					<text v-text="placeObj.isYgjb? '有':'无'"></text>
				</view>-->
				<view class="font-bold text-black-33 mb-2">周边配套</view>
				<text class="pb-2" v-text="placeObj.perMatch || '暂无'"></text>
			</view>
		</view>
		<view class="bg-white px-4 pb-4 mb-4">
			<view class="py-3 border-b-ee text-black-33 font-bold text-lg">进驻条件</view>
			<view class="pt-4 leading-7" v-text="placeObj.entryConditions || '暂无'"></view>
		</view>
		<view class="bg-white px-4 pb-6 mb-4">
			<view class="py-3 border-b-ee text-black-33 font-bold text-lg">场地内容</view>
			<u-parse :content="placeObj.content" :selectable="true"></u-parse>
		</view>
    <view class="bg-white mb-4 p-4 pb-6">
      <view class="bg-white w-full py-4 fixed bottom-0 z-50 shadow-lg">
        <view class="flex items-center mx-5">
          <view class="text-center mr-8">
            <i class="iconfont icon-fenxiang block text-xl text-color-a0"></i>
            <text class="text-gray-99 text-sm">分享</text>
          </view>
          <view  class="flex items-center justify-center flex-1 py-2_5 rounded-full text-white mx-1 bg-green-900"
                 @click="phoneCall">电话联系</view>
          <view  class="flex items-center justify-center flex-1 py-2_5 rounded-full text-white mx-1 bg-theme  "
                 @click="$util.myNavigateTo('/pages_mine/edit_user?businessType=placeApply&businessId='+placeObj.id+'&businessName='+placeObj.name)">使用申请</view>
        </view>
      </view>
    </view>
	</nav-header>
</template>

<script>
	import {mapState} from 'vuex'
	import NavHeader from '@/components/nav_header.vue'
	import * as systemApi from '@/interface/common/system.js'
	import * as placeApi from '@/interface/junchuang/place.js'
	export default {
		components: {
			NavHeader
		},
		data() {
			return {
				id: '',
				platform: '',
				formCode: '',
				markers: [],
				currentNum: 0,
				placeObj: this.initObj({}),
				markerStyle: {
					color: '#62ce91',
					iconPath: '/static/common/marker.png'
				},
			}
		},
		computed: {
			...mapState({
				user: state => state.user,
			})
		},
		onLoad(e) {
			const v = this
			v.id = e.id
			wx.getSystemInfo({
				success: function(res) {
					v.platform = res.platform
				}
			})
		},
    onShow() {
      this.$util.openShare();
    },
		mounted() {
			this.initData()
			if (this.user.token) this.formCode = this.$util.getFormCode('场地申请')
		},
		methods: {
			initData () {
				const v = this
				placeApi.getPlaceDetail(v.id).then(res=>{
					if (res.success) {
						Object.assign(v.placeObj,res.data)
						if (v.placeObj.fileList.length > 0) {
							v.placeObj.fileList.forEach(file=>{
								v.placeObj.imageList.push(v.$util.formatImageIdUrl(file.id))
							})
						}else {
							v.placeObj.imageList.push(v.$config.server_pic_url + 'site_bg.jpg')
						}
						if (v.placeObj.lon && v.placeObj.lat) {
							v.markers.push({
								id: 0,
								iconPath: v.markerStyle.iconPath,
								label: {
									anchorY: -68,
									padding: 8,
									color: v.markerStyle.color,
									textAlign: 'center',
									content: v.placeObj.name,
									bgColor: '#fff',
									borderRadius: 6,
								}, latitude: v.placeObj.lat,longitude: v.placeObj.lon, width: 32, height: 32})
						}
					}
				})
			},
			goNav () {
				if (this.markers.length == 0) return
				wx.openLocation({
					latitude: this.placeObj.lat,
					longitude: this.placeObj.lon
				})
			},
			phoneCall () {
				const v = this
				if (!v.placeObj.phone) return
				if (v.platform == 'ios') {
					call()
				}else {
					wx.showActionSheet({
						itemList: [v.placeObj.phone,'呼叫'],
						success:function(res){
							if(res.tapIndex==1){
								call()
							}
						}
					})
				}
				function call() {
					wx.makePhoneCall({
						phoneNumber: v.placeObj.phone
					})
				}
			},

			collect () {
				if (this.placeObj.isCollected) {
					systemApi.deleteCollect(this.placeObj.userCollectId).then(() => {
						this.placeObj.isCollected = false
						this.placeObj.userCollectId = ''
						uni.$u.toast("已取消收藏.")
					})
				  } else {
					systemApi.saveCollect(2, this.id).then(res => {
						if (res.success) {
							this.initData()
							uni.$u.toast("收藏成功.")
						}
					})
				}
			},
			turnArea (val) {
				if (!val) return 0
				let lastVals = (val + '').split(".")
				if (parseInt(lastVals[1]) > 0) {
					return val
				}else {
					return parseInt(val)
				}
			},
			swiperClick (index) {
				this.$util.picPreview(index, this.placeObj.imageList)
			},
			initObj ({name,areaName,imageList = [], isCollected = false, userCollectId, fileList = [], cover, introduce, content, used, price, address, lon, lat, floorArea, totalArea, conditions, parking, buildYear, wgMoney,
				perMatch, isAirCon = 0, isGdxf = 0, isZdpl = 0, isYgjb = 0, road, busStop,entryConditions, phone}) {
				return {name,areaName,imageList, isCollected, userCollectId, fileList, cover, introduce, content, used, price, address, lon, lat, floorArea, totalArea, conditions, parking, buildYear, wgMoney,
				perMatch, isAirCon, isGdxf, isZdpl, isYgjb, road, busStop,entryConditions, phone}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f7f7f7;
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			 color: #FFFFFF;
			 font-size: 12px;
		 }
	}

	.greenGradient {
		background: #69ca7b;
		background: -webkit-linear-gradient(to bottom,#69ca7b,#5aad6b);
		background: linear-gradient(to bottom,#69ca7b,#5aad6b);
	}

	.blueGradient {
		background: #1fb3e7;
		background: -webkit-linear-gradient(to bottom,#1fb3e7,#3983ff);
		background: linear-gradient(to bottom,#1fb3e7,#3983ff);
	}
</style>
